<template>
  <div :id="id" :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    Max: {
      type: Number,
      default: 10
    },
    charData: {
      type: Array,
      default: []
    },
    //接受盒子高度 实现高度自适应
    changeHeight: 0
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    //监视窗口变化实现自适应
    window.addEventListener('resize', this.resizeChart)
  },

  destroyed() {
    //  及时销毁 防止内存泄露
    window.removeEventListener('resize', this.resizeChart)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getVirtulData(year) {
      year = year || '2022';
      var date = +echarts.number.parseDate(year + '-01-01');
      var end = +echarts.number.parseDate(year + '-12-31');
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time <= end; time += dayTime) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 10000)
        ]);
      }
      return data;
    },
    resizeChart() {
      this.chart ? this.chart.resize() : ''
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: {
          top: 30,
          left: 'center',
          text: '文章归档统计'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.data[1] + ' 篇博文: ' + params.data[0] ;
          }
        },
        visualMap: {
          // show: false,
          min: 0,
          max: this.Max,
          type: 'piecewise',
          orient: 'horizontal',
          left: 'center',
          top: 65,
          textStyle: {color: '#000'},
          precision: 0,
          inRange: {
            color: ['#e7ecb0', '#c0d45f', '#8cc665', '#44a340', '#1e6823']
          }
        },
        calendar: {
          top: 110,
          left: 30,
          right: 30,
          cellSize: ['auto', 15],
          range: [
            (new Date().getFullYear() - 1) + '-' +  (new Date().getMonth() + 1)  + '-' + new Date().getDate(),
            new Date().getFullYear() + '-' +  (new Date().getMonth() + 1)  + '-' + new Date().getDate()
          ],
          // range: ,
          itemStyle: {
            borderWidth: 0.5
          },

          splitLine: {show: false},
          monthLabel: {
            nameMap: [
              '一月', '二月', '三月',
              '四月', '五月', '六月',
              '七月', '八月', '九月',
              '十月', '十一月', '十二月'
            ], position: 'end'
          }, // 设置日历坐标中 月份轴的样式
          dayLabel: {nameMap: ['日', '一', '二', '三', '四', '五', '六']},// 设置日历坐标中 星期轴的样式
          yearLabel: {show: true}
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: this.charData
        }
      })
    }
  }
}
</script>
